<template>
  <div>
    <div>
      &numsp;&numsp;&numsp;&numsp;&numsp;&numsp;&numsp;&numsp;请求到的数据:
    <span style="color: red ; font-size: 20px" >{{message1}}</span>
    </div>
    <div>
    <br>
    <el-button @click="getMessage2" type="primary">请求</el-button>
    请求到的数据: <span style="color: red ;font-size: 20px">{{message2}}</span>
    </div>
    <div>
      <br>
      <el-button @click="getMessage3">rest请求后端</el-button>
      请求到的数据: <span style="color: red ;font-size: 20px">{{message3}}</span>
    </div>

    <div>
      <br>
      <el-button @click="getMessage4">请求后端</el-button>
    </div>

    <div>
      <br>
      <el-button @click="getMessage5">请求后端</el-button>
    </div>
  </div>
</template>

<script>
import http from "../api/http";
const axios=require('axios')
export default {
  name: "Axios01",
  data() {
    return {
      message1: null,
      message2:null,
      message3:null,
      Car:{
          id:1,
        carName:'奔驰2',
        brand:'奔驰',
        oilWear: 12.1,
        dailyRent: 11.1,
        state:0
      }
    }
  },methods:{
    getMessage1(){
     axios.get("http://localhost:8888/api/01").then((response)=>{
       this.message1=response.data
     })
    },getMessage2(){
      axios.get("http://localhost:8888/api/02").then((response)=>{
        this.message2=response.data;
      })
    },getMessage3(){
      axios.get("http://localhost:8888/api/03/奔驰/Suv").then((response)=>
      {this.message3=response.data
      this.$message(response.data)})
    },getMessage4(){
      http.get('/api/05',{params:{
        username:"fsdaf",
          password:1231
        }}).then((response=>{
        this.$message(response.data)
      }))
    },getMessage5(){
      http.get('/api/08').then((response)=>{
        this.$alert(response.data)
      })
    }

  },created(){
    this.getMessage1()
  }
}
</script>

<style scoped>

</style>